<template>
  <div class="avatar">
    <div class="bg">
      <img :src="url1" />
      <div class="upcover">
        <el-upload
          class="upload-demo"
          action="http://localhost:8081/bg/avatar"
          :before-upload="beforeupload"
          :on-error="onerror"
          name="bgavatar"
          :headers="headers"
          :show-file-list="false"
        >
          <el-button
            ><el-icon><CirclePlusFilled /></el-icon>上传封面照片</el-button
          >
        </el-upload>
      </div>
    </div>
    <div class="info">
      <div class="infos">
        <el-upload
          class="upload-demo"
          action="http://localhost:8081/avatar"
          name="avatar"
          :headers="headers"
          :show-file-list="false"
        >
          <img v-if="url1" :src="url1" class="avatar" />
        </el-upload>

        <div class="data">
          <h3>{{ name }}</h3>
          <div class="trade">所在行业：{{ industry }}</div>
          <div>联系方式：{{ phone }}</div>
          <div class="label">个人标签：</div>
        </div>
      </div>
      <div class="edit" @click="editclick">
        <el-button>编辑个人资料</el-button>
        <el-dialog
          v-model="centerDialogVisible"
          title="编辑信息"
          width="30%"
          center
        >
          <el-form
            :label-position="labelPosition"
            label-width="100px"
            :model="formLabelAlign"
            :rules="rules"
            style="max-width: 460px"
            ref="ruleFormRef"
          >
            <el-form-item label="登录账号：" prop="name">
              <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="所在行业：">
              <el-input v-model="formLabelAlign.industry" />
            </el-form-item>
            <el-form-item label="联系方式：">
              <el-input v-model="formLabelAlign.pnone" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="centerDialogVisible = false">关闭</el-button>
              <el-button type="primary" @click="submit(ruleFormRef)"
                >提交</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
      
  <script setup >
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";

import LocalCache from "@/utils/cache";

const store = useStore();
const { id, name, industry, phone, labels } = LocalCache.userinfo();
console.log(phone, industry, " phone, industry");
const url1 = require("@/assets/images/bj.jpg");
let centerDialogVisible = ref(false);
const editclick = () => {
  console.log("编辑个人资料");
  centerDialogVisible.value = !centerDialogVisible.value;
};
const beforeupload = (file) => {
  const suffix = file.name.split(".");
  if (suffix[suffix.length - 1] !== "png") {
    ElMessage.error({
      message: "文件格式只能是.png",
    });
    return false;
  }
  console.log("点击了封面上传", file);
};
const headers = {
  userid: id,
};
const labelPosition = ref("right");
const formLabelAlign = reactive({
  name: "",
  industry: "",
  pnone: "",
  id,
});
const ruleFormRef = ref();
const submit = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      centerDialogVisible.value = !centerDialogVisible.value;
      store.dispatch("main/editinfo", formLabelAlign);
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const rules = {
  name: [
    {
      pattern: /^[a-z0-9]{5,10}$/,
      message: "用户名长度在5到10个字符或者数字",
      trigger: "blur",
    },
  ],
};
</script>
      
<style scoped lang="less">
.avatar {
  position: relative;

  .bg {
    height: 131px;
    position: relative;
    > img {
      border-radius: 4px;
      width: 100%;
      height: 100%;
    }
    .upcover {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
  .info {
    height: 140px;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    .infos {
      display: flex;
      /deep/ .avatar {
        width: 160px;
        height: 160px;
        position: absolute;
        top: 85px;
        left: 20px;
        border: 3px solid #ffffff;
      }
      .data {
        margin-left: 200px;
        overflow: hidden;
        .trade {
          margin-bottom: 10px;
        }
        .label {
          padding-top: 10px;
        }
      }
    }
    .edit {
      margin-top: 80px;
      margin-right: 10px;
    }
  }
}
</style>
      